<template>
  <div>
    <el-form :model="registerForm" :rules="registerRules"  status-icon ref="registerForm" class="demo-ruleForm">
      <el-form-item prop="mobile">
        <el-input type="number" placeholder="请输入手机号" v-model="registerForm.mobile" class="input-with-select">
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input placeholder="请输入密码" v-model="registerForm.password" show-password></el-input>
      </el-form-item>
      <el-form-item prop="verificationCode">
        <el-input placeholder="请输入验证码" v-model="registerForm.verificationCode" class="input-with-select">
          <el-button slot="append" @click="sendcode" :disabled="show">
            <span v-show="!show" class="count"> 发送验证码</span>
            <span v-show="show" class="count">({{ count }}s)</span>
          </el-button>
        </el-input>
      </el-form-item>
    </el-form>

    
  </div>
</template>

<script>

import { sendSMSVerificationCode ,RegisterUser} from "../http/register";
export default {
  name:"registeruser",
  data() {
    var validataMobile=(rule,value,callback)=>{
      if(value==="")
      {
        callback(new Error("手机号不能为空"));

      }else
      {

        callback();
      }

    };
    var validataPassword=(rule,value,callback)=>{
      if(value==="")
      {
        callback(new Error("密码不能为空"));

      }else
      {

        callback();
      }

    };
    var validataCode=(rule,value,callback)=>{
      if(value==="")
      {
        callback(new Error("验证码不能为空"));

      }else
      {

        callback();
      }

    }
    return {
      registerForm: {
        //注册时候，需要的三个数据值
        mobile: "",
        password: "",
        verificationCode: "",
      },
      registerRules:{mobile:[{validator:validataMobile,trigger:'blur'}],
     password:[{validator:validataPassword,trigger:'blur'}],
     verificationCode:[{validator:validataCode,trigger:'blur'}],
    },
      timer: null,//计时器
      show: false,
      count: 0
    };
  },
  methods: {
    openMessage: function(Message) {
        this.$alert(Message, '注册时发生问题', {
          confirmButtonText: '确定',
          //callback: action => {
          //  this.$message({
              //type: 'info'
             // message: `action: ${ action }`
           // });
          //}
        });
      },
    //发送验证码
    sendcode: function () {
     
      var mobile = this.registerForm.mobile;

      sendSMSVerificationCode(mobile).then((c) => {
        if(c.data.Message!=null)
        {
          
         this.openMessage(c.data.Message);
        }
        else
        {

          if (!this.timer) {
        this.count = 30;
        this.show = true;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 30) {
            this.count--;
          } else {
            this.show = false;
            clearInterval(this.timer); // 清除定时器
            this.timer = null;
          }
        }, 1000);
      }   
        }
      }).catch((error) => {
        console.log(error) // 错误处理 相当于 error
      });
    },
   submitRegist(){
    RegisterUser(this.registerForm).then (c=>{
      if(c.data.Message!=null)
        {
          
         this.openMessage(c.data.Message);
        }
        else
        {
          this.$message({
                message: "注册成功",
                type: "success",
              }); 
              this.$emit('on-change-Result', false); 

        }
    })
   
   }
  },
};
</script>